<template>
	<div class="nav">
		<div class="navCon">
			<div class="logo">
				<img src="../assets/maylogo.png" width="60px" alt="">
			</div>
			<ul class="li">
				<li v-for="i in navlist"><router-link :to="i.link">{{i.title}}</router-link></li>				
			</ul>
		</div>
	</div>
</template>
<script>
	export default{
		name:'MyNav',
		data(){
			return{
				navlist:[{title:'我的博客',link:'/'},{title:'关于我',link:'/about'}]
			}
		}
	}
	
</script>
<style scoped>
	.nav{
		height:70px;
		background-color: rgba(170,180,121,1);
		overflow: hidden;
	}
	.logo{
		float: left;
		line-height:70px;	 
	}
	.logo img{
		margin-top: 18px;
	}
	.navCon{
		width: 1000px;
		margin: 0 auto;
	}
	.nav ul{
		margin-left: 100px;
	}
	.nav ul li{
		float: left;
		line-height: 70px;
		font-size: 16px;
		margin-right: 30px;
	}
	.nav ul li:hover a{
		color: #e38f15;
	}
	.nav ul li.active{
		color: #e38f15;
	}
</style>